* {
  box-sizing: border-box;
}

html,
body {
  font-size: 12px;
}

h1 {
  margin: 10px 0 0;
  text-align: center;
}

p {
  margin: 0 0 20px;
  text-align: center;
}

input {
  border: 1px solid #ccc;
  font-size: 12px;
  height: 30px;
  padding: 4px 8px;
  position: absolute;
  width: 50%;
}
input:focus {
  outline: none;
}

button {
  text-align: center;
}
button:focus {
  outline: none;
}
button.btn-search, button.btn-reset {
  background: hotpink;
  border: none;
  height: 30px;
  font-size: 12px;
  padding: 4px;
  position: absolute;
  width: 30px;
}

.sample {
  float: left;
  height: 50px;
  margin: 0 8%;
  position: relative;
  width: 34%;
}
.sample.one input, .sample.two input {
  border-radius: 15px;
  right: 0;
  transition: all .3s ease-in-out;
  width: 50%;
}
.sample.one input:focus, .sample.two input:focus {
  width: 100%;
}
.sample.one input:focus ~ button.btn-search, .sample.two input:focus ~ button.btn-search {
  background: hotpink;
  color: #fff;
}
.sample.one input:focus ~ button.btn-reset, .sample.two input:focus ~ button.btn-reset {
  right: -22px;
}
.sample.one button, .sample.two button {
  transition: all .3s ease-in-out;
}
.sample.one button.btn-search, .sample.two button.btn-search {
  background: #ccc;
  border-radius: 50%;
  height: 26px;
  right: 2px;
  top: 2px;
  transition: all .3s ease-in-out;
  width: 26px;
}
.sample.one button.btn-reset, .sample.two button.btn-reset {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  font-size: 10px;
  height: 20px;
  line-height: 20px;
  padding: 0;
  right: 5px;
  top: 5px;
  width: 20px;
  z-index: -1;
}
.sample.three, .sample.four {
  perspective: 400px;
}
.sample.three input, .sample.four input {
  width: 120px;
}
.sample.three input:focus ~ button.btn-search, .sample.four input:focus ~ button.btn-search {
  transform: rotateY(180deg);
  transition: transform .6s ease-in-out .2s;
}
.sample.three input:focus ~ button.btn-reset, .sample.four input:focus ~ button.btn-reset {
  transform: rotateX(0deg) translateY(32px) translateX(2px);
  transition: transform .6s ease-in-out .8s;
}
.sample.three button.btn-search, .sample.four button.btn-search {
  backface-visibility: visible;
  color: #fff;
  padding: 0;
  position: relative;
  transform: rotateY(0deg);
  transform-origin: 121px 0;
  transform-style: preserve3d;
  transition: transform .6s ease-in-out .2s;
  width: 120px;
}
.sample.three button.btn-reset, .sample.four button.btn-reset {
  backface-visibility: hidden;
  background: #ccc;
  transform: rotateX(-180deg) translateY(30px) translateX(2px);
  transform-origin: 0 32px;
  transform-style: preserve3d;
  transition: transform .6s ease-in-out .2s;
  width: 120px;
}
.sample.four button.btn-search {
  transition: transform .6s ease-in-out .8s;
}
.sample.five, .sample.six {
  perspective: 400px;
}
.sample.five input, .sample.six input {
  width: 120px;
}
.sample.five input:focus ~ button.btn-search, .sample.six input:focus ~ button.btn-search {
  transform: rotateY(180deg) translateX(60px);
  transition: all .6s ease-in-out .2s;
  width: 60px;
}
.sample.five input:focus ~ button.btn-reset, .sample.six input:focus ~ button.btn-reset {
  transform: rotateY(0deg);
  transition: all .6s ease-in-out .8s;
}
.sample.five button.btn-search, .sample.six button.btn-search {
  backface-visibility: visible;
  color: #fff;
  padding: 0;
  position: relative;
  transform: rotateY(0deg) translateX(0px);
  transform-origin: 121px 0;
  transform-style: preserve3d;
  transition: all .6s ease-in-out .2s;
  width: 120px;
}
.sample.five button.btn-reset, .sample.six button.btn-reset {
  backface-visibility: hidden;
  background: #ccc;
  left: 184px;
  transform: rotateY(180deg);
  transform-origin: left 0;
  transform-style: preserve3d;
  transition: all .6s ease-in-out .2s;
  width: 60px;
}
.sample.six button.btn-search {
  transition: all .6s ease-in-out .8s;
}
.sample.seven input, .sample.eight input {
  border-right: none;
  transition: all .3s ease-in;
  width: 120px;
}
.sample.seven input:focus, .sample.eight input:focus {
  width: 220px;
}
.sample.seven input:focus ~ button.btn-search, .sample.eight input:focus ~ button.btn-search {
  background: hotpink;
  border-radius: 0 50% 50% 0;
  color: #fff;
  left: 220px;
}
.sample.seven input:focus ~ button.btn-reset, .sample.eight input:focus ~ button.btn-reset {
  animation: bounceRight .6s;
  animation-delay: .2s;
  animation-timing-function: cubic-bezier(0.3, 0.2, 1, 0.8);
  border-radius: 50%;
  color: #fff;
  left: 254px;
}
.sample.seven button.btn-search, .sample.eight button.btn-search {
  background: #ccc;
  left: 120px;
  transition: all .3s ease-in;
}
.sample.seven button.btn-reset, .sample.eight button.btn-reset {
  background: #000;
  height: 20px;
  left: 120px;
  top: 5px;
  transition: all .3s ease-in;
  width: 20px;
  z-index: -1;
}
.sample.nine input, .sample.ten input {
  border-radius: 15px;
  transition: all .6s ease-in-out .3s;
  width: 120px;
}
.sample.nine input:focus, .sample.ten input:focus {
  transition-delay: 0;
  width: 200px;
}
.sample.nine input:focus ~ button, .sample.ten input:focus ~ button {
  transform: rotateZ(360deg);
}
.sample.nine input:focus ~ button.btn-search, .sample.ten input:focus ~ button.btn-search {
  background: hotpink;
  color: #fff;
  left: 172px;
  transition-delay: 0;
}
.sample.nine input:focus ~ button.btn-reset, .sample.ten input:focus ~ button.btn-reset {
  left: 202px;
  transition-delay: .3s;
}
.sample.nine button, .sample.ten button {
  transition: all .6s ease-in-out;
}
.sample.nine button.btn-search, .sample.ten button.btn-search {
  background: #ccc;
  border-radius: 50%;
  height: 26px;
  left: 92px;
  top: 2px;
  transition-delay: .3s;
  width: 26px;
}
.sample.nine button.btn-reset, .sample.ten button.btn-reset {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  font-size: 10px;
  height: 20px;
  left: 92px;
  line-height: 20px;
  padding: 0;
  top: 5px;
  width: 20px;
  z-index: -1;
}
.sample.eleven input, .sample.twelve input {
  border-radius: 15px;
  transition: all .6s ease-in-out;
  width: 120px;
}
.sample.eleven input:focus, .sample.twelve input:focus {
  width: 200px;
}
.sample.eleven input:focus ~ button.btn-search, .sample.twelve input:focus ~ button.btn-search {
  animation: jumpTowardSearch 1.2s linear;
  background: hotpink;
  color: #fff;
  left: 172px;
}
.sample.eleven input:focus ~ button.btn-reset, .sample.twelve input:focus ~ button.btn-reset {
  animation: jumpTowardReset 1.2s linear .4s;
  left: 202px;
}
.sample.eleven button, .sample.twelve button {
  transition: all .6s ease-in-out;
}
.sample.eleven button.btn-search, .sample.twelve button.btn-search {
  background: #ccc;
  border-radius: 50%;
  height: 26px;
  left: 92px;
  top: 2px;
  width: 26px;
}
.sample.eleven button.btn-reset, .sample.twelve button.btn-reset {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  font-size: 10px;
  height: 20px;
  left: 92px;
  line-height: 20px;
  padding: 0;
  top: 5px;
  width: 20px;
  z-index: -1;
}
.sample.thirteen input, .sample.fourteen input {
  background: none;
  border-color: #000;
  border-radius: 15px;
  border-width: 0 0 1px;
  transition: all .8s ease-in-out;
  width: 30px;
}
.sample.thirteen input:focus, .sample.fourteen input:focus {
  background: radial-gradient(ellipse at top left, rgba(0, 0, 0, 0) 65%, #00FFFF 140%);
  border-radius: 0 15px 15px 0;
  width: 250px;
}
.sample.thirteen input:focus ~ button.btn-search, .sample.fourteen input:focus ~ button.btn-search {
  background: hotpink;
  color: #fff;
  left: 222px;
  transform: rotate(720deg);
}
.sample.thirteen input:focus ~ button.btn-reset, .sample.fourteen input:focus ~ button.btn-reset {
  left: 256px;
  transform: rotate(360deg);
}
.sample.thirteen button, .sample.fourteen button {
  transition: all .8s ease-in-out;
}
.sample.thirteen button.btn-search, .sample.fourteen button.btn-search {
  background: #ccc;
  border: 1px solid #000;
  border-radius: 50%;
  height: 30px;
  left: 0;
  width: 30px;
}
.sample.thirteen button.btn-reset, .sample.fourteen button.btn-reset {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  font-size: 10px;
  height: 20px;
  left: 2px;
  line-height: 20px;
  padding: 0;
  top: 10px;
  width: 20px;
  z-index: -1;
}

@keyframes bounceRight {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0px);
  }
}
@keyframes jumpTowardSearch {
  0% {
    background: #ccc;
    opacity: 1;
    transform: rotateZ(0deg) scale(1);
  }
  20% {
    background: #ccc;
    opacity: 0;
    transform: rotateZ(-60deg) scale(50);
  }
  55% {
    background: hotpink;
    opacity: 0;
    transform: rotateZ(-30deg) scale(100);
  }
  90% {
    background: hotpink;
    opacity: 0;
    transform: rotateZ(-30deg) scale(50);
  }
  100% {
    background: hotpink;
    opacity: 1;
    transform: rotateZ(0deg) scale(1);
  }
}
@keyframes jumpTowardReset {
  0% {
    opacity: 0;
    transform: rotateZ(0deg) scale(1);
  }
  20% {
    opacity: 0;
    transform: rotateZ(-60deg) scale(50);
  }
  55% {
    opacity: 0;
    transform: rotateZ(-30deg) scale(100);
  }
  90% {
    opacity: 0;
    transform: rotateZ(-30deg) scale(50);
  }
  100% {
    opacity: 1;
    transform: rotateZ(0deg) scale(1);
  }
}
